<template>
  <div class="header-line" ref="fixedHeader" :class="{ 'fixed-header': fixedType }">
    <a-breadcrumb>
      <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
        <router-link v-if="item.name != name && index != 1" :to="{ path: item.path === '' ? '/' : item.path }">{{
          item.meta.title
        }}</router-link>
        <span v-else>{{ item.meta.title }}</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
    <slot name="handleContent"></slot>
  </div>
</template>

<script>
export default {
  name: 'Breadcrumb',
  props: {
    breadList: Array,
    name: String
  },
  data () {
    return {
      fixedType: false
    }
  },
  mounted () {
    document.body.addEventListener('scroll', this.handleScroll, { passive: true })
  },
  methods: {
    handleScroll () {
      const scrollTop = document.body.scrollTop
      this.fixedType = scrollTop > 64
    }
  },
  watch: {
    $route () {
      this.getBreadcrumb()
    }
  }
}
</script>

<style scoped>
.header-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
</style>
